<!--
 * @Author your name
 * @Date 2021-03-04 15:22:56
 * @LastEditTime 2021-03-05 17:24:39
 * @LastEditors Please set LastEditors
 * @Description In User Settings Edit
 * @FilePath \fed-e-task-04-06\code\angular-demo\src\app\app.component.html
-->
<!-- <button (click)="increment()">+1</button>
<button (click)="async_increment()">延迟相加</button>
<span>{{ count | async }}</span>
<button (click)="decrement()">-1</button> -->

<div>
    <pre>
        {{ todos |  async | json }}
    </pre>
</div>

<div class="contain" @todoAniamtions>
    <h2>Todos</h2>
    <input type="text" class="form-control" placeholder="请在此处添加任务" #AddTodoInput>
    <ul class="list-group">
        <li @slide (@slide.start)="startSlide($event)" (@slide.done)="doneSlide($event)"
            *ngFor="let todo of todos | async" class="list-group-item">
            {{ todo.title }}
            <button class="btn" (click)="deleteTodo(todo.id)">删除</button>
        </li>
    </ul>
</div>

<div class="container">
    <div class="panel panel-default">
        <div class="panel-heading" (click)="toggle()">
            一套框架, 多种平台, 移动端 & 桌面端
        </div>
        <div class="panel-body" [@collapsedExpanded]="collapsed ? 'collapsed' : 'expanded'">
            <p>
                使用简单的声明式模板，快速实现各种特性。使用自定义组件和大量现有组件，扩展模板语言。在几乎所有的
                IDE 中获得针对 Angular
                的即时帮助和反馈。所有这一切，都是为了帮助你编写漂亮的应用，而不是绞尽脑汁的让代码“能用”。
            </p>
            <p>
                从原型到全球部署，Angular 都能带给你支撑 Google
                大型应用的那些高延展性基础设施与技术。
            </p>
            <p>
                通过 Web Worker 和服务端渲染，达到在如今(以及未来）的 Web
                平台上所能达到的最高速度。 Angular 让你有效掌控可伸缩性。基于
                RxJS、Immutable.js 和其它推送模型，能适应海量数据需求。
            </p>
            <p>
                学会用 Angular
                构建应用，然后把这些代码和能力复用在多种多种不同平台的应用上 ——
                Web、移动 Web、移动应用、原生应用和桌面原生应用。
            </p>
        </div>
    </div>
</div>
<a routerLink="">home</a>
<a routerLink="/about">about</a>
<a routerLink="/news">news</a>
<div [@routerAnimation]="prepare(outlet)" class="routerContainer">
    <router-outlet #outlet="outlet"></router-outlet>
</div>
